<template>
		<view class="gx">
			<!-- 更新弹框 -->
			<u-popup :mask-close-able='false' v-model="show" mode="center" border-radius="20" width="60%">
				<view class="nppops shtks">
					<view class="contr">
						<view class="li">
							<image src="../../static/logo.png"></image>
							<view class="title">
								<!-- Diamonds -->
							</view>
							<view class="title">
								版本:{{versionnew}}
							</view>
							<view class="title">
								{{valnum}}% 更新中 <text><u-loading size='28' mode="flower"></u-loading></text>
							</view>
							<u-line-progress height='18' :show-percent='false' :striped="true" active-color="#466DF8"
								:percent="valnum"></u-line-progress>
						</view>
					</view>
				</view>
			</u-popup>
			<!-- 更新 -->
			<u-popup :mask-close-able='false' v-model="show3" mode="center" border-radius="20" width="80%">
				<view class="nppop shtk">
					<view class="contr">
						<view class="li">
							<view class="title ti">
								软件更新提示!
							</view>
						</view>
						<view class="li">
							<view class="title">
								有新版本啦 {{versionnew}},是否更新到新版本!
							</view>
						</view>
					</view>
					<view class="btngrs">
						<button @tap="cancel">取消</button>
						<button @click.once="upd" hover-class="active" >更新</button>
					</view>
				</view>
			</u-popup>
		</view> 
</template>

<script>
	import {showToast} from '../../common/js/sysfun.js';
	import {mapGetters,mapMutations} from 'vuex'
	export default{
		data(){
			return{
				valnum: 0,
				versionnew: 0,
				updoff: false,
				show: false,
				show3: false,
			}
		},
		created() {
			this.upt()
		},
		computed:{
			...mapGetters([
				'getLangType',
				'getRequestUrl'
			]),
			i18n() {
				return this.$t('message');
			}
		},
		methods:{
			upd() {
				this.show3 = false
				this.show = true
				this.updoff = true
				this.upt()
				uni.showLoading({
					title:'请稍等...'
				})
			},
			cancel(){
				this.show3 = false
				// plus.runtime.quit(); //强制退出
			},
			upt() {
				// #ifdef APP-PLUS
				var server = this.getRequestUrl + "/api/index/app_info"; //检查更新地
				var req = { //升级检测数据  
					"appid": plus.runtime.appid,
					"version": plus.runtime.version
				};
				let _this = this;
				uni.request({
					url: server,
					data: '',
					success: (res) => {
						console.log(res)
						if (res.data.code == 1) {
							//enforce  1更新，0不更新
							if (res.data.data.enforce == 1) {
								if (uni.getSystemInfoSync().platform == 'ios') {
									//判断是否ios更新
									if (req.version == res.data.data.newversion) {
										// ios版本号相同不提示更新
									} else {
										// ios版本号不同提示更新
									}
								} else if (uni.getSystemInfoSync().platform === 'android') {
									//判断是否安卓更新
									_this.versionnew = res.data.data.newversion
									if (req.version == res.data.data.newversion) {} else {
										if (!_this.updoff) {
											_this.show3 = true
											
										} else {
											//安卓地址 res.data.data.apk_url
											var dtask = plus.downloader.createDownload(
												res.data.data.downloadurl, {},
												function(d, status) {
													// uni.showToast({
													// 	title: '下载',
													// 	mask: false,
													// 	duration: 1000
													// });
													// 下载完成
													if (status == 200) {
														plus.runtime.install(plus.io
															.convertLocalFileSystemURL(
																d
																.filename), {},
															e =>
															e,
															function(error) {
																uni.showToast({
																	title: '更新失败',
																	mask: false,
																	duration: 1500
																});
															})
													} else {
														uni.showToast({
															title: '更新失败',
															mask: false,
															duration: 1500
														});
													}
												});
											try {
												uni.hideLoading()
												dtask.start(); // 开启下载的任务
												dtask.addEventListener('statechanged',
													function(task, status) {
														// 给下载任务设置一个监听 并根据状态  做操作
														if (task.state == 3) {
															_this.show = true;
															_this.valnum = parseInt((
																parseFloat(task
																	.downloadedSize
																) /
																parseFloat(task
																	.totalSize)
															) * 100);
														} else if (task.state == 4) {
															_this.show = false;
															plus.runtime.quit();
														}
													});
											} catch (err) {
												plus.nativeUI.closeWaiting();
												uni.showToast({
													title: '更新失败',
													mask: false,
													duration: 1500
												});
											}
										}
										// if (_this.updoff) {
											
										// } else {
										// 	//强制更新，不更新直接退出
										// 	// plus.runtime.quit();
										// 	// redirectologin()
										// }


									}
								}
							} else if (res.data.data.enforce == 0) {
								//enforce 不会弹出更新提示
							}
						} else {
							// redirectologin()
						}

					},
					fail: (end) => {
						console.log(end.errMsg)
					}
				})
				// #endif

			},
		}
	}
</script>

<style lang="scss" scoped>
	.gx {
		.shtks {
			padding: 30rpx 20rpx;
			background: #fff;
		
			.shtitle {
				padding-top: 24rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #272727;
			}
		
			.btngrs {
				margin: 64rpx 0 0;
				display: flex;
				justify-content: space-between;
				
				button {
					flex: 1;
					margin: 0;
					padding: 0;
					width: 0;
					height: 78rpx;
					line-height: 78rpx;
					font-size: 30rpx;
				}
		
				button:first-child {
					background: #fff;
					border: 1rpx solid #466DF8;
					color: #272727;
				}
				
				.active {
					background-color: #120d26;
				}
				button:last-child {
					margin-left: 15rpx;
					color: #fff;
					background: #466DF8;
					border: 1rpx solid #466DF8;
				}
			}
		}
		
		.nppops {
			padding: 30rpx;
			box-shadow: 0px 4px 20px 0px #333;
			.contr {
				color: #272727;
				text-align: center;
		
				.li {
					position: relative;
					padding-bottom: 15rpx;
		
					image {
						width: 85rpx;
						height: 85rpx;
					}
					.ti {
						font-size: 36rpx;
					}
					.title {
						padding: 10rpx 0;
						text {
							padding-left: 15rpx;
						}
					}
		
					input {
						margin-top: 20rpx;
						background-color: #131e30;
						height: 80rpx;
						border-radius: 15rpx;
						color: #272727;
						padding-left: 15rpx;
						font-size: 28rpx;
					}
		
					.rig {
						position: absolute;
						top: 105rpx;
						right: 15rpx;
					}
				}
			}
		}
		.shtk {
			padding: 30rpx 20rpx;
			background: #fff;

			.shtitle {
				padding-top: 24rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #272727;
			}

			.btngrs {
				margin: 64rpx 0 0;
				display: flex;
				justify-content: space-between;
				
				button {
					flex: 1;
					margin: 0;
					padding: 0;
					width: 0;
					height: 78rpx;
					line-height: 78rpx;
					font-size: 30rpx;
					border-radius: 999rpx;
				}

				button:first-child {
					background: #fff;
					border: 1rpx solid #466DF8;
					color: #272727;
					box-shadow: 0px 0px 20px 0px #466DF8;
				}
				
				.active {
					background-color: #eee;
				}
				button:last-child {
					margin-left: 15rpx;
					color: #fff;
					background: #466DF8;
					// border: 1rpx solid #2484ff;
					box-shadow: 0px 0px 20px 0px #466DF8;
				}
			}
		}

		.nppop {
			padding: 30rpx 30rpx 60rpx 30rpx;
			box-shadow: 0px 4px 20px 0px #333;
			.contr {
				color: #272727;
				text-align: center;

				.li {
					position: relative;
					padding-bottom: 15rpx;

					image {
						width: 85rpx;
						height: 85rpx;
					}
					.ti {
						font-size: 36rpx;
					}
					.title {
						padding: 10rpx 0;
						text {
							padding-left: 15rpx;
						}
					}

					input {
						margin-top: 20rpx;
						background-color: #fff;
						height: 80rpx;
						border-radius: 15rpx;
						color: #272727;
						padding-left: 15rpx;
						font-size: 28rpx;
					}

					.rig {
						position: absolute;
						top: 105rpx;
						right: 15rpx;
					}
				}
			}
		}
		/deep/.u-drawer__scroll-view {
			background-color: #fff;
		}
	}
</style>
